<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '多经推荐提醒',
    onReachBottomDistance: 100,
  },
}
</route>

<template>
  <view class="page-container">
    <wd-sticky :offset-top="-45">
      <view class="nav-bar border-b">
        <view class="flex items-center justify-between px-4 h-10">
          <view class="flex items-center">
            <wd-icon name="arrow-left" size="22px" @click="goBack"></wd-icon>
            <span class="ml-3 text-base font-medium">多经推荐提醒</span>
          </view>
          <span class="text-#4477ee text-sm">筛选</span>
        </view>
        <wd-notice-bar
          text="以下建议提醒方案由AI按照用户画像、消费习惯、会话管理等信息综合生成，查看详情可了解个更多信息！"
          prefix="warn-bold"
        />
        <!-- <view class="flex flex-row gap-2 bg-gray-50 px-4 py-2 text-sm text-gray-600">
          <wd-icon name="warn-bold" size="22px" color="#FF9800"></wd-icon>
          <view class="">
            以下建议提醒方案由AI按照用户画像、消费习惯、会话管理等信息综合生成，查看详情可了解个更多信息！
          </view>
        </view> -->
        <view>
          <wd-tabs v-model="tab" @click="handleTab">
            <wd-tab :title="`待推荐`"></wd-tab>
            <wd-tab :title="`已推荐`"></wd-tab>
            <wd-tab :title="`已忽略`"></wd-tab>
          </wd-tabs>
        </view>
        <!-- <view class="flex px-4 bg-white border-b">
          <view
            class="py-3 px-4"
            :class="tabActive == 1 ? 'tab-active' : 'text-gray-600'"
            @click="handleTab(1)"
          >
            待提醒
          </view>
          <view
            class="py-3 px-4"
            :class="tabActive == 2 ? 'tab-active' : 'text-gray-600'"
            @click="handleTab(2)"
          >
            已提醒
          </view>
          <view
            class="py-3 px-4"
            :class="tabActive == 3 ? 'tab-active' : 'text-gray-600'"
            @click="handleTab(3)"
          >
            暂不提醒
          </view>
        </view> -->
      </view>
    </wd-sticky>

    <view class="content">
      <view v-if="loading" class="center m-5">
        <wd-loading />
      </view>
      <view v-else>
        <view class="py-3 mx-3 space-y-3" v-if="recommendList.length">
          <view
            class="bg-white rounded-lg p-3 shadow-sm relative"
            v-for="item in recommendList"
            :key="item.id"
          >
            <image
              v-if="item.deal == 1"
              class="absolute right-2 top-1 h-16 w-16"
              src="/static/deal.png"
            />

            <view class="mt-1 text-sm">
              <view class="flex justify-between">
                <view class="flex">
                  <text class="text-[#6e6e6e] w-22 shrink-0">线索编号：</text>
                  <text>
                    {{ item.clueNumber }}
                  </text>
                </view>
                <view v-if="item.deal == 2">
                  <wd-tag
                    color="#0083ff"
                    bg-color="#eff6ff"
                    v-if="item.clueTypeName == '会话分析'"
                    custom-class="tag"
                  >
                    {{ item.clueTypeName }}
                  </wd-tag>
                  <wd-tag
                    color="#ef4444"
                    bg-color="#fef2f2"
                    v-else-if="item.clueTypeName == '余额不足'"
                    custom-class="tag"
                  >
                    {{ item.clueTypeName }}
                  </wd-tag>
                  <wd-tag
                    color="#f97316"
                    bg-color="#fff7ed"
                    v-else-if="item.clueTypeName == '复购线索'"
                    custom-class="tag"
                  >
                    {{ item.clueTypeName }}
                  </wd-tag>
                </view>
              </view>
              <view class="mt-1 flex">
                <text class="text-[#6e6e6e] w-22 shrink-0">线索名称：</text>
                <text class="text-[#4477ee] font-bold" v-if="item.clueName == '家政服务'">
                  {{ item.clueName }}
                </text>
                <text class="text-[#67C23A] font-bold" v-else-if="item.clueName == '直饮水业务'">
                  {{ item.clueName }}
                </text>
                <text class="text-[#F56C6C] font-bold" v-else>
                  {{ item.clueName }}
                </text>
              </view>
              <view class="mt-1 flex">
                <text class="text-[#6e6e6e] w-22 shrink-0">关联房间：</text>
                <text>
                  {{ item.roomName }}
                </text>
              </view>
              <view class="mt-1 flex">
                <text class="text-[#6e6e6e] w-22 shrink-0">关联业主：</text>
                <text>
                  {{ item.customerName }}
                </text>
              </view>
              <view class="mt-1 flex">
                <text class="text-[#6e6e6e] w-22 shrink-0">线索说明：</text>
                <text>
                  {{ item.describtion }}
                </text>
              </view>
            </view>

            <view class="mt-3 text-align-right" style="text-align: right">
              <wd-button
                size="small"
                :round="true"
                v-if="item.status == 1"
                plain
                style="margin-right: 8px"
                @click="handleIgnore(item.id)"
              >
                忽略
              </wd-button>
              <wd-button
                size="small"
                :round="true"
                v-if="item.status == 1"
                @click="goPageRecomdetail(item.id)"
              >
                去推荐
              </wd-button>
              <wd-button size="small" :round="false" plain v-if="item.status == 2">
                查看详情
              </wd-button>
            </view>
          </view>

          <wd-loadmore :state="state" @reload="loadmore" />
        </view>
        <wd-status-tip v-else image="content" tip="暂无内容" />
      </view>
    </view>
    <wd-toast />
  </view>
</template>

<script lang="ts" setup>
import { getClueList, IClue } from '@/pages/duojing/api/index'
import type { LoadMoreState } from 'wot-design-uni/components/wd-loadmore/types'
import { useToast } from 'wot-design-uni'
const tab = ref(0)
// const tabActive = ref(1)
const recommendList = ref<IClue[]>([])
const loading = ref(true)
const state = ref<LoadMoreState>('finished')
const colorTags = ['primary', 'success', 'warning', 'danger', 'primary']
const pageNo = ref(1)
const recommendListRes = ref([])
const toast = useToast()

handleTab({ index: 0 })
async function handleTab({ index }) {
  // tabActive.value = index
  console.log(`index:${index}`)

  loading.value = true
  pageNo.value = 1
  await loadmore(index)
  loading.value = false
}

async function loadmore(idx: number): Promise<void> {
  getClueList({ status: tab.value + 1, pageSize: 10, pageNum: pageNo.value })
    .then((res: IResData<IClue[]>) => {
      console.log(res)
      const list = (res && res.rows) || []
      if (list.length < 10) {
        state.value = 'finished'
      } else {
        state.value = 'loading'
        pageNo.value++
      }
      if (pageNo.value === 1) {
        recommendList.value = list
      } else {
        recommendList.value = [...recommendList.value, ...list]
      }
    })
    .catch((error) => {
      state.value = 'error'
      toast.error(error.message)
    })
}

onPullDownRefresh(async () => {
  await handleTab({ index: tab.value })
  uni.stopPullDownRefresh()
})
onReachBottom(() => {
  if (state.value !== 'finished') {
    loadmore(tab.value)
  }
  // if (pageNo.value < 5) {
  //   state.value = 'loading'
  //   loadmore(tab.value)
  // } else if (pageNo.value >= 5) {
  //   state.value = 'finished'
  // }
})
function handleIgnore(id) {
  toast.loading('加载中...')
  setTimeout(() => {
    recommendList.value = recommendList.value.filter((item) => item.id !== id)
    toast.success('忽略成功')
  }, 1000)
}
function goPageRecomdetail(id) {
  uni.navigateTo({
    url: `/pages/duojing/recomdetail?id=${id}`,
  })
}
function goBack() {
  uni.navigateBack({
    delta: 1,
  })
}
</script>

<style lang="scss" scoped>
//
.page-container {
  min-height: 100vh;
  // padding-top: 300rpx;
  padding-bottom: 0rpx;
  background-color: #f5f7fa;
}
.nav-bar {
  // position: fixed;
  // top: 0;
  width: 100vw;
  // z-index: 100;
  background: #fff;
  border-bottom: 1px solid #e5e5e5;
}
.content {
  padding-bottom: 20rpx;
}
.tab-active {
  color: #4b77e7;
  border-bottom: 2px solid #4b77e7;
}
:deep(.tag) {
  padding: 0 10rpx;
  font-size: 0.75rem;
  line-height: 1.25rem;
  border-radius: 8rpx;
}
</style>
